<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="containerCode" style="display: flex;">
				<span style="margin-right: 20rpx;">容器码或储位码</span>
				<u--input 
						placeholder="请输入/扫描" 
						v-model="query.containerCode" 
						suffixIcon="scan" 
						suffixIconStyle="font-size: 68rpx"
						style="flex: 1;">
				</u--input>
			</u-form-item>
		</u--form>
		<!-- 标题部分 -->
		<view style="display: flex;padding: 0 30rpx;">
			<view style="flex: 1;">物料名称</view>
			<view style="flex: 1;">需分拣数量</view>
			<view style="flex: 1;">目的容器</view>
			<view style="flex: 1;">已分拣数量</view>
		</view>
		<!-- 数据部分 -->
		<view v-for="(item, index) in List" :key="index">
			<u-cell>
				<view
						slot="title"
						class="u-slot-title"
				>
					<view style="display: flex;align-items: center;">
						<view style="flex: 1;text-align: center;">113</view>
						<view style="flex: 1;text-align: center;">113</view>
						<view style="flex: 1;text-align: center;">栈板{{ index + 1 }}</view>
						<view style="flex: 1;">
							<u--input placeholder="请输入"></u--input>
						</view>
					</view>
				</view>
			</u-cell>
		</view>
		<view style="display: flex;margin-top: 30rpx;gap: 20rpx;position: fixed;left: 0;bottom: 0;right: 0;margin: 20rpx;">
			<u-button type="primary">确认</u-button>
			<u-button type="primary">分拣异常</u-button>
			<u-button type="primary">取消</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					containerCode: ''
				},
				List: ['','','']
			};
		}
	}
</script>

<style lang="scss">
</style>

